<template>
  <el-row style="width: 1000px">
    <el-col :span="24">
      <div class="grid-content ep-bg-purple"/>
      <el-menu
          active-text-color="#f93684"
          class="el-menu-demo"
          mode="horizontal"
          style="border-radius: 10%;height: 100%"
      >
        <el-menu-item index="1"> 全部</el-menu-item>
        <el-menu-item index="2"> 我创建的</el-menu-item>
        <el-menu-item index="3"> 我加入的</el-menu-item>
        <el-menu-item index="4"> 我课程的</el-menu-item>
        <el-button type="danger"
                   :icon="Plus"
                   round style="margin-left: 550px;
                   margin-top: 13px;
                   background-color: #f93684"
                   @click="appDialog
">
          创建
        </el-button>
      </el-menu>
    </el-col>
  </el-row>

  <el-dialog v-model="centerDialogVisible" title="微信打开扫一扫" width="30%" center style="width: 260px;font-size: 12px" >
    <div style="margin-left:55px;margin-top: -20px"><img src="../../../../../src/assets/3.png"  style="width: 100px;"></div>

    <div style="margin-left: 50px;color:#f93684 "> “有小惊喜哦”</div>

  </el-dialog>
</template>

<script lang="ts" setup>

import {Plus} from '@element-plus/icons-vue'
import {ref} from "vue";

const centerDialogVisible = ref(false)
const appDialog = () => {
  centerDialogVisible.value = true
}

</script>
